import React from 'react';
import ReactECharts from 'echarts-for-react';
import 'echarts-wordcloud';

interface WordCloudProps {
  data: {
    name: string;
    value: number;
    key: string;
  }[];
}

const WordCloud: React.FC<WordCloudProps> = ({ data = [] }) => {

  const option = {
    series: [
      {
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '100%', //
        height: '100%',
        sizeRange: [20, 80], // 调整字体大小范围，从 [14, 50] 改为 [20, 80]
        rotationRange: [-45, 45], // 旋转角度范围
        rotationStep: 15, // 旋转角度步长
        gridSize: 6, // 减小网格大小，让词之间可以更紧密
        drawOutOfBound: false, // 是否绘制超出边界的词
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: function () {
            return (
              'rgb(' +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(',') +
              ')'
            );
          },
        },
        emphasis: {
          textStyle: {
            shadowBlur: 10,
            shadowColor: '#333',
          },
        },
        data: data.map((item) => ({
          key: item.key,
          name: item.name,
          value: item.value,
          textStyle: {
            color: `rgb(${Math.round(Math.random() * 155 + 100)}, ${Math.round(
              Math.random() * 155 + 100
            )}, ${Math.round(Math.random() * 155 + 100)})`,
          },
        })),
      },
    ],
  };

  return <ReactECharts option={option} style={{ height: '400px' }} />;
};

export default WordCloud;
